<template>
  <div>
    <div id="main">
      <div class="main">
        <div class="mainTop">
          <!-- 文本内容 -->
          <div class="topContent">
            <div class="title">
              人工智能应用技术创新中心
              <span>专注互联网信息化服务</span>
            </div>
            <p>
              我们团队致力于帮助企业创造价值和竞争优势，成为企业的专业软件技术团队，为企业提供高质量的软件服务
            </p>
            <p>微信公众号开发、小程序开发、手机APP软件制作、系统软件定制开发</p>
          </div>
          <!-- 下方栏 -->
          <div class="botContent">
            <ul class="botList">
              <li
                class="listBody"
                v-for="item in botTextContent"
                :key="item.index"
              >
                <img :src="item.x" />
                <div class="text">
                  <span class="wbTit">{{ item.tit }}</span>
                  <p>{{ item.content }}</p>
                </div>
              </li>
            </ul>
          </div>
          <!-- 右边栏 -->
          <div class="right">
            <div class="side1">
              <a href="#">
                <img class="sideImg" src="@/assets/kefu/side-kefu.png" alt="" />
                <span class="sideText">联系客服</span>
              </a>
            </div>
            <div class="side2">
              <a href="#">
                <img class="sideImg" src="@/assets/kefu/side-tel.png" alt="" />
                <span class="sideText">177 5492 8306</span>
              </a>
            </div>
            <div class="side3">
              <a href="#">
                <img
                  class="sideImg"
                  src="@/assets/kefu/side-weixin.png"
                  alt=""
                />
                <span class="sideText">11111111</span>
              </a>
            </div>
            <div class="side4">
              <a href="#">
                <img
                  class="sideImg"
                  src="@/assets/kefu/side-code.png"
                  alt=""
                  style="margin: 7px 0 0 7px"
                />
              </a>
              <div class="ewm">
                <img src="@/assets/ew.jpg" alt="" />
              </div>
            </div>
            <div class="side5" v-show="bool">
              <a href="#">
                <img
                  class="sideImg"
                  src="@/assets/kefu/side-top.png"
                  alt=""
                  @click="toTop"
                />
              </a>
            </div>
          </div>
        </div>
        <!-- 第二部分 服务项目部分 -->
        <div class="service">
          <div class="serviceMain">
            <h3>服务项目</h3>
            <p>
              用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！
            </p>
            <div class="cardList">
              <div class="card" v-for="item of serviceList" :key="item.index">
                <h3 class="cardTitle">{{ item.serveTit }}</h3>
                <div>
                  <img :src="item.serveImg" alt="" />
                </div>
                <p
                  class="cardContent"
                  v-for="k of item.serveContent"
                  :key="k.index"
                >
                  {{ k }}
                </p>
                <span class="checkInfo">查看详情</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 第三部分 作品案例 -->
        <div class="production">
          <div class="productionMain">
            <h3>作品案列</h3>
            <p>用技术与专注，将作品通过艺术和技术的结合，打造精品案例。</p>
            <ul>
              <li v-for="item of workList" :key="item.index">
                <a href="#">
                  <img :src="item.imgSrc" alt="" />
                  <p>{{ item.workInfo }}</p>
                </a>
              </li>
            </ul>
            <div class="btn">
              <a href="#">
                <span>更多案例</span>
              </a>
            </div>
          </div>
        </div>
        <!-- 第四部分 企业文化 -->
        <div class="culture">
          <div class="cultureMain">
            <h2>企业文化</h2>
            <p>珠联璧合，互利共赢</p>
            <div class="cultureContent">
              <ul class="content">
                <li
                  v-show="flag === item.f"
                  class="contentList"
                  v-for="item of contentList"
                  :key="item.index"
                >
                  <img
                    :class="item.f === 4 ? 'fImg' : ''"
                    :src="item.leftImg"
                    alt=""
                  />
                  <div class="cultrueText">
                    <h3>{{ item.textH }}</h3>
                    <p>{{ item.p1 }}</p>
                    <p>{{ item.p2 }}</p>
                  </div>
                </li>
              </ul>
            </div>
            <ul class="circle">
              <li
                :class="flag === 1 ? 'active' : ''"
                @mouseover="show1"
                @mouseout="show1"
              ></li>
              <li
                :class="flag === 2 ? 'active' : ''"
                @mouseover="show2"
                @mouseout="show2"
              ></li>
              <li
                :class="flag === 3 ? 'active' : ''"
                @mouseover="show3"
                @mouseout="show3"
              ></li>
              <li
                :class="flag === 4 ? 'active' : ''"
                @mouseover="show4"
                @mouseout="show4"
              ></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      botTextContent: [
        {
          x: require("@/assets/slogan-1.png"),
          tit: "质量",
          content:
            "在项目研发过程中，保证项目研发质量，上线质量，线上质量以及技术人员",
        },
        {
          x: require("@/assets/slogan-2.png"),
          tit: "透明",
          content:
            "为保证研发资料透明化，当合作项目顺利完成后，合作企业项目可将全部资料",
        },
        {
          x: require("@/assets/slogan-3.png"),
          tit: "共创",
          content:
            "珠联璧合，互利共赢——与传统产业的企业或初创公司组成共创团队，共同打",
        },
        {
          x: require("@/assets/slogan-4.png"),
          tit: "效率",
          content: "与直接研发人员对接，保证项目研发进度，从而提高工作效率",
        },
      ],
      serviceList: [
        {
          serveTit: "软件设计",
          serveImg: require("@/assets/pc1.png"),
          serveContent: [
            "专业定制软件",
            "各种软件/分销/电商系统",
            "专业程序设计服务",
          ],
        },
        {
          serveTit: "APP软件设计",
          serveImg: require("@/assets/pc2.png"),
          serveContent: [
            "为企源提供移动终端站略解决方案",
            "专业定制IOS/安卓APP软件",
            "专业APP设计服务",
          ],
        },
        {
          serveTit: "微信系统建设",
          serveImg: require("@/assets/pc3.png"),
          serveContent: [
            "专业建设各种微信平台软件",
            "电商/小程序/分销系统/企业平台",
            "专业定制开发服务",
          ],
        },
      ],
      workList: [
        {
          imgSrc: require("../../assets/cases1.png"),
          workInfo: "钉钉报表小程序",
        },
        {
          imgSrc: require("../../assets/cases2.png"),
          workInfo: "GSClound发电机组云控系统",
        },
        {
          imgSrc: require("../../assets/case3.jpg"),
          workInfo: "速绽雪电商服务平台",
        },
        {
          imgSrc: require("../../assets/cases4.jpg"),
          workInfo: "计算机文化报名系统",
        },
      ],
      flag: 1,
    };
  },
  methods: {
    show1() {
      this.flag = 1;
    },
    show2() {
      this.flag = 2;
    },
    show3() {
      this.flag = 3;
    },
    show4() {
      this.flag = 4;
    },
  },
};
</script>

<style lang="scss">
// 卡片 第二部分
@mixin card {
  width: 350px;
  height: 450px;
  background: #fafafa;
  position: relative;
  box-sizing: border-box;
  padding: 40px 70px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.6s;
  &:hover {
    transform: scale(0.9);
  }
}
@mixin cardTitle {
  font-size: 25px;
  color: #000;
  margin: 25px 0;
  width: 200px;
  text-align: center;
  min-width: auto;
  font-weight: 600;
}
@mixin cardContent {
  width: 220px;
  min-width: 220px;
  color: #666;
  font-size: 14px;
  text-align: center;
  margin-bottom: 15px;
}
@mixin checkInfo {
  display: block;
  width: 160px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #0595c7;
  border-radius: 5px;
  color: #0595c7;
  cursor: pointer;
  margin: auto;
  &:hover {
    color: #fff;
    background: #0595c7;
  }
}
@mixin h3 {
  font: {
    weight: 400;
    size: 30px;
  }
  text-align: center;
  margin-bottom: 20px;
  min-width: 1100px;
}
@mixin p {
  text-align: center;
  margin: 0;
  min-width: 1100px;
  font-size: 13px;
}
// main 部分
.main {
  .mainTop {
    box-sizing: border-box;
    width: 100%;
    height: 748px;
    min-width: 1300px;
    background: url(../../assets/case-bg1.jpg) no-repeat;
    background-size: 100% 100%;
    padding-top: 220px;
    position: relative;
    animation: bgPic 20s infinite;
    -webkit-animation: bgPic 20s infinite;
    // 上面文字部分
    .topContent .title {
      color: #fff;
      text-align: center;
      font-size: 45px;
      span {
        color: #0595c7;
        margin-left: 20px;
      }
    }
    .topContent p {
      color: #ccc;
      text-align: center;
      margin: 30px 0;
      font-size: 18px;
    }
    // 下面文字部分
    .botContent {
      position: absolute;
      bottom: 0;
      height: 100px;
      width: 100%;
      background: #000;
      opacity: 0.5;
      .botList {
        width: 1200px;
        height: 100%;
        min-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        list-style: none;
        padding: 10px 0;
        display: flex;
        .listBody {
          display: flex;
          width: 25%;
          overflow: hidden;
          margin-left: 15px;
          color: #fff;
          img {
            margin: 10px;
            width: 48px;
            height: 52px;
          }
          .text {
            .wbTit {
              line-height: 36px;
              font-size: 18px;
              text-align: left;
            }
            p {
              letter-spacing: 0.5px;
              font-size: 11px;
              height: 36px;
              line-height: 18px;
              margin: 0;
            }
          }
        }
      }
    }
  }
  // 动画
  @keyframes bgPic {
    0% {
      background: url(../../assets/bg.gif);
      background-size: 100% 100%;
    }
    50% {
      background: url(../../assets/case-bg1.jpg);
      background-size: 100% 100%;
    }
    100% {
      background: url(../../assets/bg.gif);
      background-size: 100% 100%;
    }
  }

  // 第二部分 服务项目部分
  .service {
    height: 800px;
    width: 100%;
    padding: 70px 200px;
    box-sizing: border-box;
    -webkit-animation: serve 2s ease-in-out 1;
    animation: serve 2s ease-in-out 1;
    .serviceMain {
      h3 {
        @include h3;
      }
      p {
        @include p;
      }
      .cardList {
        height: 500px;
        min-width: 1100px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .card {
          @include card;
          .cardTitle {
            @include cardTitle;
          }
          img {
            width: 120px;
            height: 120px;
          }
          .cardContent {
            @include cardContent;
          }
          .checkInfo {
            @include checkInfo;
          }
        }
      }
    }
  }
  @keyframes serve {
    0% {
      margin-left: -600px;
      opacity: 0.1;
    }
    100% {
      margin-left: 0;
      opacity: 1;
    }
  }

  // 第三部分 作品案列部分
  .production {
    width: 100%;
    height: 700px;
    background: url(../../assets/case-bg.jpg) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 150px 150px 100px 150px;
    .productionMain {
      min-width: 1100px;
      position: relative;
      h3 {
        @include h3;
        font-weight: 700;
        margin-bottom: 15px;
        color: #fff;
      }
      p {
        @include p;
        color: #ccc;
        font-size: 15px;
        margin-bottom: 50px;
      }
      ul {
        width: 100%;
        overflow: auto;
        display: flex;
        flex-direction: row;
        li {
          width: 24%;
          height: 200px;
          overflow: hidden;
          margin-left: 6px;
          position: relative;
          a {
            img {
              width: 100%;
              height: 100%;
              transition: 500ms ease-in-out;
              &:hover {
                width: 120%;
                height: 120%;
                margin-left: -10%;
                // transform: scale(1.2);
              }
            }
            p {
              position: absolute;
              bottom: 0;
              margin: 0;
              width: 100%;
              height: 30px;
              line-height: 30px;
              text-align: center;
              background: #000;
              opacity: 0.7;
              color: #fff;
              font-size: 15px;
              cursor: pointer;
              min-width: auto;
            }
          }
        }
      }
      .btn {
        height: 40px;
        width: 100%;
        margin-top: 20px;
        padding-top: 50px;
        position: relative;
        a {
          span {
            @include checkInfo;
            height: 40px;
            width: 150px;
            line-height: 40px;
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transition: 0.5s ease-in-out;
            text-align: center;
            &:hover {
              z-index: 1;
              color: #fff;
              background: transparent;
            }
            &:hover::before {
              width: 100%;
            }
            &::before {
              content: "";
              z-index: -1;
              transition: 0.5s ease-in-out;
              position: absolute;
              background: #0595c7;
              border-radius: 5px;
              transform: translateX(-50%);
              left: 50%;
              width: 0;
              height: 100%;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }

  // 第四部分 企业文化
  .culture {
    width: 100%;
    height: 700px;
    min-width: 1300px;
    box-sizing: border-box;
    padding: 150px 300px;
    .cultureMain {
      width: 100%;
      h2 {
        @include h3;
        min-width: auto;
        margin-bottom: 15px;
      }
      p {
        @include p;
        min-width: auto;
        color: #aaa;
        font-size: 15px;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 15px;
      }
      .cultureContent {
        width: 100%;
        height: 140px;
        overflow: hidden;
        // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        .content {
          margin: 16px 0;
          padding-left: 40px;
          box-sizing: border-box;
          height: 140px;
          width: 900px;
          position: relative;
          display: flex;
          .contentList {
            display: flex;
            list-style: none;
            position: absolute;
            animation: a 1.7s;
            -webkit-animation: a 1.7s;
            .fImg {
              transform: scale(0.8);
              border-radius: 50%;
              margin-right: 7px;
            }
            img {
              height: 130px;
              width: 130px;
            }
            .cultrueText {
              h3 {
                text-align: left;
                margin: 17px 0;
              }
              p {
                color: #aaa;
                font-size: 15px;
                text-align: left;
                margin: 15px 0;
              }
            }
          }
          @keyframes a {
            0% {
              opacity: 0;
            }
            100% {
              opacity: 1;
            }
          }
        }
      }
      .circle {
        width: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding: 0 400px;
        margin-top: 70px;
        display: flex;
        li {
          list-style: none;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: 1px solid #0595c7;
          margin-left: 15px;
        }
      }
      .active {
        background: #0595c7;
      }
    }
  }
}
</style>